<template>
  <div class="policy-detail">
    <el-tabs v-model="activeTab" @tab-click="tabClick">
      <el-tab-pane label="经营范围" name="info">
        <slot name="detail"></slot>
      </el-tab-pane>
      <el-tab-pane label="立项查询" name="second">
        <projectDrawer @queryProjectList="(params)=>queryProject(params)" :data="projectData" :projectDataTotal="projectDataTotal" ref="drawer" />
        <!-- <el-radio-group v-model="dataType" class="mb-4">
          <el-radio-button label="专利" />
          <el-radio-button label="软件著作权" />
        </el-radio-group>
        <el-table
          v-if="dataType === '专利'"
          :data="patentData"
          style="width: 100%"
        >
          <el-table-column prop="name" label="专利名称" />
          <el-table-column prop="type" label="专利类型" />
          <el-table-column prop="applyNo" label="申请号" />
          <el-table-column prop="applyTime" label="申请日期" />
          <el-table-column prop="openTime" label="公开日期" />
          <el-table-column prop="status" label="法律状态" />
          <el-table-column prop="inventor" label="发明人" />
          <el-table-column prop="openNo" label="公开号" />
        </el-table>
        <el-table v-else :data="accsData" style="width: 100%">
          <el-table-column prop="name" label="软件全称" />
          <el-table-column prop="version" label="版本号" />
          <el-table-column prop="registerNo" label="登记号" />
          <el-table-column prop="completeDate" label="开发完成日期" />
          <el-table-column prop="registerDate" label="登记日期" />
          <el-table-column prop="accessMode" label="权力取得方式" />
          <el-table-column prop="shortName" label="软件简称" />
          <el-table-column prop="publishDate" label="首次发布日期" />
        </el-table> -->
      </el-tab-pane>
      <el-tab-pane label="数据分析" name="atlas">
        <p class="mb-2 text-yellow-500">{{ tipsText }}</p>
        <div class="data-pie-list">
          <div
            class="pie-item"
            v-for="(item, index) in dataPieList"
            :key="item.type"
            @click="openNewPage('analysis', item.type)"
          >
            <img
              v-if="index == 0"
              src="../../../../assets/image/mini-pie.jpg"
            />
            <img
              v-else-if="index == 1"
              src="../../../../assets/image/mini-pie2.jpg"
            />
            <img
              v-else-if="index == 2"
              src="../../../../assets/image/mini-pie3.jpg"
            />
            <img
              v-else-if="index == 3"
              src="../../../../assets/image/mini-pie4.jpg"
            />
            <p>{{ item.label }}</p>
          </div>
        </div>
        <!-- <div class="query-project">
          <el-button type="primary" @click="queryProject(drawer, info.id)"
            >立项查询</el-button
          >
        </div> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref } from "vue";
import { useDetailHook, useCompanyHook } from "../hooks";
import projectDrawer from "../projectDrawer/index.vue";

const props = defineProps(["info"]);
const drawer = ref();
const tabClick =  (tab)=>{
  if(tab.index=='1'){
    queryProject(props.info.id,props.info.name)
    console.log('company',props.info)
  }
}
onMounted(() => {
  getCompanyData(props.info.id);
  getTipsText(props.info.id);
});

const { activeTab, openNewPage, dataPieList } = useDetailHook(props.info, "2");
const {
  dataType,
  dataTypeChange,
  patentData,
  accsData,
  getCompanyData,
  getTipsText,
  tipsText,
  projectData,
  projectDataTotal,
  queryProject
} = useCompanyHook();
</script>

<style scoped lang="postcss">
.policy-detail {
  .filter-box {
    @apply mb-4 flex bg-white p-4 px-3 rounded-md;
    .date-picker,
    .nature-picker {
      @apply flex items-center;
      .filter-label {
        @apply mr-3 font-bold;
      }
    }
    .date-picker {
      @apply mr-8;
      :deep(.el-check-tag) {
        @apply bg-gray-200;
        .is-checke {
          @apply bg-red-400;
        }
      }
      :deep(.el-check-tag.is-checked) {
        @apply bg-theme-color text-white;
      }
    }
    .nature-picker {
      @apply mr-8;
    }
  }

  .data-pie-list {
    @apply flex flex-wrap;
    .pie-item {
      @apply mr-8 p-2 bg-white cursor-pointer rounded-md;
      transition: 0.4s all;
      &:hover {
        @apply bg-theme-color text-white;
      }
      img {
        width: 170px;
        height: 150px;
      }
      p {
        @apply text-center mt-2 font-bold;
      }
    }
  }
  .atlas-list {
    @apply flex items-center;
    .atlas-item {
      @apply mr-8 p-2 bg-white cursor-pointer rounded-md;
      transition: 0.4s all;
      &:hover {
        @apply bg-theme-color text-white;
      }
      img {
        width: 170px;
        height: 150px;
      }
      p {
        @apply text-center mt-2 font-bold;
      }
    }
  }
  .query-project {
    @apply absolute right-0 top-0;
  }
}
</style>
